<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content='IE=edge' charset="utf-8"/>
    <title>F4 Helper</title>
    <link rel="Stylesheet" type="text/css" href="../../css/common/bi_app_style.css"/>
    <link rel="Stylesheet" type="text/css" href="../../<%=theme%>/css/theme_style.css"/>

    <script type="text/JavaScript" src="../../api/js/jquery-1.8.3.js"></script>
    <script type="text/JavaScript" src="../../api/js/jquery-ui-1.9.2.custom.js"></script>
    <script type='text/JavaScript' src='../../../zbw_reporting/scripts/framework_include.js'></script>
    <script type="text/JavaScript">
        var BOI = parent.BOI; //REQUIRED
        var properties = { //REQUIRED
            checkboxItems:10,
            variable:undefined,
            varname:undefined, //this overrides variable if set
            value:undefined,
            notify:false
        };
        window.onload = function () {
        }
        var total;
        var totalPages;
        var checkedItems = new Array();
        var oCBs = new Array();
        var lab = new Array();
        var initialize = function initialize() {//REQUIRED //initialization function ... see below..
            /*---- begin your component custom initialization code ----*/
            BOI.Events.addListener(BOI.Events.varreset, function (args) {
                if (properties.variable) {
                    properties.variable.value = properties.variable.defval;
                    properties.value = properties.variable.defval;
                } else {
                    properties.value = undefined;
                }

                //do your logic to clear component
                //check properties.value if it is undefined or if it is "" or whatever
                //and act accordingly to reset your component

                //SAMPLE RESET
                cycle = 1;
                load(cycle);
            });
            //example to set property values to dom elements
            refreshProperties();
        };
        var refresh = function refresh() { //REQUIRED function to be called by parent at anytime to refresh data.
        };
        var vname;
        var cycle = 1;
        var refreshProperties = function refreshProperties() { //REQUIRED function to be called by parent when a property change occurs
            vname = properties.varname ? properties.varname
                    : properties.variable ? properties.variable.name : undefined;
            if (vname) {
                load(cycle);
                var label = $('#bi_var_name');
                // label.html(vname);
                if (properties.variable) {
                    //  label.attr('title', properties.variable.description);
                    $('#dynName')[0].name =  "selectall" +  properties.variable.description;
                    $('#bi_desc').html(properties.variable.description);
                }
            }
        };

        var selected = new Array();
        function load(cycle) {
          BOI.loadF4Values(
            vname,
            cycle,
            properties.checkboxItems,
            function (data) {
                var values = data.values;
                selected = data.values;
                total = data.total;
                totalPages = Math.ceil(data.total / properties.checkboxItems);
                pagination();
                for (idx in values) {
                  $('#content ul')
                    .append(
                    '<li>'
                            + '<input class="check_cls" onclick="setCheckValue(this)" type="checkbox" name="'
                            + values[idx].name
                            + '" id="'
                            + values[idx].value
                            + '" value="'
                            + values[idx].value
                            + '" ><label>'
                            + values[idx].value
                            + '</label></li>');
                }
            }, parent.properties.rep_id);
            SelectAllEvent( "check_cls" , $('#dynName')[0].id);
        }

        function SelectAllEvent(className, id) {
          $("#" + id).click(function () {
             $('.' + className).prop('checked', this.checked);
             checkedItems = new Array();
             $('#content ul').each(function(){
                // this is inner scope, in reference to the .content element
                $(this).find('li').each(function(){
                   // cache jquery var
                   var current = $(this);
                   setCheckValue(current[0]);
                });
              });
          });
        }

        function searchList() {
          $('#content ul').html('');
          var entretext = $('.search-box').val();
          BOI.loadF4Values(properties.variable.name, 1,
            undefined, function (data) {
                data = $.parseJSON(data.json);
                total = data.total;
                totalPages = Math.ceil(data.total / properties.checkboxItems);
                pagination();
                for (i in  data.VALUES_TABLE_C.IHTTPNVP) {
                    $('#content ul')
                            .append(
                            '<li>'
                                    + '<input class="check_cls" onclick="setCheckValue(this)" type="checkbox" name="'
                                    + data.VALUES_TABLE_C.IHTTPNVP[i].NAME
                                    + '" id="'
                                    + data.VALUES_TABLE_C.IHTTPNVP[i].VALUE
                                    + '" value="'
                                    + data.VALUES_TABLE_C.IHTTPNVP[i].VALUE
                                    + '" ><label>'
                                    + data.VALUES_TABLE_C.IHTTPNVP[i].VALUE
                                    + '</label></li>');
                }

            }, parent.properties.rep_id, entretext, 'JSON', undefined,
            undefined, true);
        }

        function pagination()
        {
            cycle++;
            if(cycle > totalPages)
              $(".pagination a").text('');
        }
        function next() {
            load(cycle);
        }

        function setCheckValue(chk) {
            if (chk.checked) {
                checkedItems.push(chk.name);
            } else {
                checkedItems.splice($.inArray(chk.name, checkedItems), 1);
            }
            // set property values
            properties.value = checkedItems;
        }

        function resetSelections() {
            checkedItems = new Array();
            properties.value = '';
            $('input[type="checkbox"]:checked').prop('checked', false);
        }
        $(document).ready(function () {
            // Setting height for Variable Inner
            var varHd = $('.variable-head').height();
            var varCvr = window.parent.$('.varscreen [LOC]').height();
            $('.variable-inner').height((varCvr - varHd)- 18);
        });
    </script>
    <style>
        body { overflow:hidden; background: none;}
    </style>
</head>
<body class='sapUiBody'>
<div class="multiple">
    <div class="variable-head">
        <div id="bi_var_name"></div>
        <h3><input type="checkbox" id="dynName"/> <span id="bi_desc"></span></h3>
        <div class="variable-search">
            <p id="chk_search">
                <label>Check List:</label> <input class="search-box disabled-text" type="text" name="searchKey"  id="text_id"/>
                <a class="searchBtn" onclick="searchList()" href="#"></a>
            </p>
        </div>
    </div>
    <div id='content' class="variable-inner">
        <ul></ul>
    </div>
    <!-- <a id="prev" onclick="prev()" href="#">Prev</a> -->
    <div class="pagination">
        <a id="next" onclick="next()" href="#">Next >></a>
    </div>
</div>
</body>
</html>
<%
theme = ''.
%>